[material-ui][Button] Deprecate composed classes for v6 #40675
Conversation
sai6855
added
component: button
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
| 'colorPrimary', | ||
| 'colorSecondary', | ||
| 'colorSuccess', | ||
| 'colorError', | ||
| 'colorInfo', | ||
| 'colorWarning', |
| @@ -149,6 +268,7 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ | |||
| 'fullWidth', | |||
| 'startIcon', | |||
| 'endIcon', | |||
| 'icon', | |||
|
Got it!! thanks for the update |
|
@DiegoAndai since option 1 is choosen for above RFC, I'm assuming no change is required in this PR |
|
@sai6855 correct! No change is required. We'll keep this PR on hold for a little longer as per this comment: #40417 (comment) |
|
Hey @sai6855, we're now unblocked: #40417 (comment) |
| replacementSelector: '.MuiButton-icon.MuiButton-sizeMedium', | ||
| replacementSelectorPrefix: '& .', |
There was a problem hiding this comment.
Shouldn't the replacement be &.MuiButton-sizeMedium .MuiButton-icon?
There was a problem hiding this comment.
from my understanding, iconSizeMedium is split into icon and sizeMedium, both these classes are applied to icon slot and not root slot. But your suggestion seems to add sizeMedium class to root slot. Am i right or did i misunderstood your question?
There was a problem hiding this comment.
The size classes are applied to the root: https://mui.com/material-ui/api/button/#button-classes-sizeLarge
So to replace the .MuiButton-iconSizeMedium class, we need to select .MuiButton-sizeMedium .MuiButton-icon: An element with class MuiButton-icon within an element with class MuiButton-sizeMedium. We might want to use the direct child selector .MuiButton-sizeMedium > .MuiButton-icon.
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
| [`&.${buttonClasses.sizeMedium}${" > "}.${buttonClasses.icon}`]: { | ||
| color: 'red', | ||
| }, | ||
| [`&.${buttonClasses.sizeLarge}${" > "}.${buttonClasses.icon}`]: { |
There was a problem hiding this comment.
tried transforming to &.${buttonClasses.sizeLarge} > .${buttonClasses.icon} but couldn't succeed. Does this tranformtion works or shall try again?
There was a problem hiding this comment.
It should work if you add ' > ' to the quasis (here) instead of the expressions when modifying the template literal. The quasis are the chunks of the template string that are not within ${}.
There was a problem hiding this comment.
Done, PR is ready for review
packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js
Show resolved
Hide resolved
packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js
Outdated
Show resolved
Hide resolved
oliviertassinari
changed the title
part of #40417
preview: https://deploy-preview-40675--material-ui.netlify.app/material-ui/api/button/#classes
migration guide: https://deploy-preview-40675--material-ui.netlify.app/material-ui/migration/migrating-from-deprecated-apis/#button